<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <style>
    *{
        margin:0;padding:0;
    }
    .main{
        width: 100%;
        height: 500px;
        background: #eee;
    }
    .left{
        width: 300px;
        height: 500px;
        float:left;
        background:yellow;
        position: relative;
        margin-left:-300px;
    }
    .right{
        width: 100%;
        height: 500px;
        background:orange;
        float:left;
   }
   .con{
      padding-right:300px;
   }

    </style>
</head>
<body>
<!--  左边自适应 右边固定 -->
   <div class="main">
       <div class="right">
           <div class="con">
              有少时诵诗书所所所所所所所所所所所
           </div>
       </div>
       <div class="left">
           左
       </div>
   </div> 
</body>
</html>